<template>
  <div class="page">
    <!-- 顶部栏 -->
    <van-nav-bar :border="false">
      <template #left>
        <div class="fz-16 fw-bold">{{ $t('推广排行榜') }}</div>
      </template>
    </van-nav-bar>

    <div class="container rel">
      <div class="mb-30">
        <div class="fz-15 ta-center cl-success mb-10">
          <span>{{ $t('奖池状态') }}：</span>
          <span>开启</span>
        </div>

        <div class="fz-15 flex flex-rb mb-15">
          <div class="cl-success">
            <span>{{ $t('全网业绩') }}：</span>
            <span>10000</span>
          </div>

          <div class="cl-success">
            <span>{{ $t('奖池结束倒计时') }}：</span>
            <span>10000</span>
          </div>
        </div>

        <div class="table">
          <div class="th">
            <div class="td">{{ $t('排名') }}</div>
            <div class="td">{{ $t('用户') }}</div>
            <div class="td">{{ $t('总业绩') }}</div>
            <div class="td">{{ $t('奖金') }}</div>
          </div>

          <div class="tr" v-for="(v, i) in 5" :key="i">
            <div class="td">1</div>
            <div class="td">啊萨达萨达萨达是</div>
            <div class="td">900</div>
            <div class="td cl-success">7</div>
          </div>
        </div>
      </div>

      <!-- 排行榜规则 -->
      <div class="ta-center">
        <div class="cl-error fz-16 mb-10">排行榜规则：</div>
        <div class="fz-12">
          为了鼓励合伙人等级用户的业绩表现，我们特别推出每日排名奖励活动。
          该活动将统计每日已上代理等级用户的直推与间推业绩总额，
          并根据排名情况给予相应的奖励。 <br />
          具体规则如下：<br /><br />

          活动时间：每日凌晨2点至12点。<br />
          活动范围：已上合伙人等级用户。<br />
          活动开启规则：全网直推与间推业绩达到1万，即开启本次活动。<br />
          活动奖池总金额：1w 奖励金额<br />
          第1名：奖励3000<br />
          第2至10名：每位奖励500<br />
          第11至20名：每位奖励250<br /><br />

          奖励发放：排名奖励将于每日凌晨1点发放至用户的数字钱包中，<br />
          每位用户每日只能获得一次排名奖励，<br />
          排名奖励不可重复叠加。奖池金额将根据活动开启规则而定。<br />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const tabs = ref([$t('直推'), $t('间推')])
const tabIndex = ref(0)

function onTabChange(i) {
  tabIndex.value = i
}
</script>

<style lang="scss" scoped></style>
